<template>
  <PageView :scrollable="false" ref="pageViewRef" :layout-vars="{showFooter:total>0}" v-loading="loading">
    <template #header>
      <div class="app-section-header">
        <!--  查询模块   -->
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
        >
          <el-form-item
              label="审核状态"
              prop="verifyStatus"
          >
            <el-select
                style="width: 130px"
                v-model="queryParams.verifyStatus"
                placeholder="请选择"
            >
              <el-option
                  v-for="item in queryParamsOptionsStates"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
              label="申请人"
              prop="applicantName"
          >
            <el-input
                v-model="queryParams.applicantName"
                placeholder="请输入申请人姓名"
                clearable
                @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
            <el-button type="primary" icon="Plus" plain @click="handleAdd">新增</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template v-slot="{contentHeight}">
      <!-- 表格 -->
      <el-table
          v-if="contentHeight>0"
          :data="tableData"
          :height="contentHeight"
          border
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
      >
        <!--   单元格能多选   -->
        <el-table-column type="selection" width="55" align="center" />
        <!--   单元格序号   -->
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column
            prop="name"
            label="姓名"
            align="center"
        >
          <template v-slot="scope">
            <div class="link-type" @click="nameClicked">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="edit"
            label="编辑"
            align="center"
        >
          <template v-slot="scope">
            <el-row class="edit-colum">
              <el-button type="primary" @click="editBtnClicked(scope.row)">编辑</el-button>
              <el-button type="danger" @click="deleteBtnClicked">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!--  对话框弹窗  -->
      <el-dialog
          width="400px"
          v-model="dialogVisible"
          :title="title"
          :before-close="handleClose"
          center
          append-to-body
          destroy-on-close
      >
        <!--   其他内容传入默认插槽     -->
        <template v-slot:default>
          <el-form
              ref="updateForm"
              :model="form"
              :rules="formRules"
              label-position="right"
              label-width="60px"
          >
            <el-form-item
                label="姓名"
                prop="name"
            >
              <el-input
                  v-model="form.name"
                  placeholder="请输入姓名"
                  clearable
              />
            </el-form-item>
            <el-form-item
                label="地址"
                prop="address"
            >
              <el-input
                  v-model="form.address"
                  placeholder="请输入地址"
                  clearable
              />
            </el-form-item>
            <el-form-item
                label="邮箱"
                prop="email"
            >
              <el-input
                  v-model="form.email"
                  placeholder="请输入邮箱"
                  clearable
              />
            </el-form-item>
            <el-form-item
                label="日期"
                prop="date"
            >
              <el-date-picker
                  v-model="form.date"
                  type="date"
                  placeholder="请选择日期"
                  :disabled-date="disabledDate"
                  :shortcuts="shortcuts"
              />
            </el-form-item>

          </el-form>
        </template>
        <!--   底部插槽     -->
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit('updateForm')">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </template>
    <template #footer>
      <div class="app-section-footer">
        <!-- 分页   -->
        <Pagination
            v-show="total>0"
            :total="total"
            :currentPage="queryParams.pageNum"
            @pagination="getList"
        />
      </div>
    </template>

  </PageView>
</template>

<script setup>

</script>

<style>

</style>

<script>
/* eslint-disable */
export default {
  name: "WebMain",
  components:{
  },
  props:{

  },
  // 注入 阻止返回上一页
  // mixins: [preventBack],
  data() {
    /**
     * 自定义校验方法
     * @param rule
     * @param value
     * @param callback
     */
    const checkAddress = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请填写地址'));
      } else {
        callback();
      }
    };

    return {
      tableData:[],
      multipleSelection:[],

      // 加载状态
      loading:false,

      // 分页相关参数
      total:0,

      // 是否显示搜索
      showSearch:true,

      // 查询参数相关
      queryParams:{
        pageNum:1,
        pageSize:10,
        verifyStatus:null,
        applicantName:null,
      },

      // 审核状态
      queryParamsOptionsStates: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "通过",
        },
        {
          value: "1",
          label: "不通过",
        },
        {
          value: "2",
          label: "待审核",
        },
      ],

      // 控制弹窗显示
      dialogVisible:false,
      title:'新增用户',

      // 弹窗表单绑定对象
      form:{
        // 编辑时 编辑行数据id
        id:'',
        date: '2016-07-12',
        name: '秋哥',
        address: '湖北省武汉市洪山区',
        email:'',
      },

      // 快捷键
      shortcuts:[
        {
          text: '最近一周',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
          },
        },
        {
          text: '最近一个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          },
        },
        {
          text: '最近三个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          },
        },
      ],

      // 表单校验规格
      formRules:{
        name:[
          { required: true, trigger: "blur", message: "请输入姓名" },
          { max:10, message: '姓名最多10个字符串' }
        ],
        address:[
            // 自定义校验方法时 所有的校验全部都交给validator指向的方法去做 不要再写额外的东西了
          { required: true, trigger: "blur", validator:checkAddress },
        ],
        email:[
            // trigger:触发时机 blur失去焦点时触发 change数据发生改变时 类似于文本框只要编辑就会触发
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
          { required:true, message:'请输入邮箱', trigger: "blur" },
        ]
      },
    }
  },
  beforeCreate() {

  },
  setup() {

  },
  created() {

  },
  mounted() {
    this.getList()
    console.log('路由传入的参数信息', this.$route.query)
    console.log('获取分页数据')
  },
  methods:{
    getList(pageInfo) {
      this.loading = true
      this.updatePageInfo(pageInfo)
      const arr = []
      for (let i = 0; i < 9; i++) {
        const item = {
          id:i,
          date: '2016-05-02',
          name: '秋哥',
          address: '湖北省武汉市洪山区',
        }
        arr.push(item)
      }
      const res = {
        total:9,
        rows:arr,
      }
      this.total = res.total
      this.tableData = res.rows
      this.loading = false
    },

    /**
     * 分页组件变动 更新分页标记数据
     * @param val
     */
    updatePageInfo(val) {
      if (val) {
        this.queryParams.pageSize = val.pageSize
        this.queryParams.pageNum = val.pageNum
      }
    },

    /**
     * 单元格多选方法
     * @param val
     */
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      console.log('当前选择的单元格数据', this.multipleSelection)
    },

    /**
     * 搜索按钮点击事件
     */
    handleQuery() {
      console.log('handleQuery:', this.queryParams)
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /**
     * 添加按钮点击事件
     */
    handleAdd() {
      this.dialogVisible = true
    },

    /**
     * 表单提交
     */
    handleSubmit(formName) {
      console.log('refs:', this.$refs)
      const { form, tableData } = this
      this.$refs[formName].validate((valid) => {
        if (valid) {

          const obj = form
          const arr = [
              ...tableData,
              obj
          ]
          this.tableData = arr

          this.dialogVisible = false;
          this.$message.success('添加用户成功')
        }
      })
    },

    /**
     * 查询表单重置
     */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },

    tableRowClassName({row, rowIndex}) {
      // console.log('rowIndex:', rowIndex)
      if (rowIndex == 1) {
        return 'warning-row';
      } else if (rowIndex == 3) {
        return 'success-row';
      } else if (rowIndex == 9) {
        return 'danger-row';
      }
      return '';
    },

    /**
     * 姓名点击事件
     */
    nameClicked() {
      // 开一个新的二级页面
      this.$router.push('/main/userInfoSetting')
    },

    /**
     * 弹窗关闭
     */
    handleClose() {
      this.dialogVisible = false
    },

    editBtnClicked(info) {
      console.log('编辑')
      this.form = info
      this.dialogVisible = true
    },

    deleteBtnClicked() {
      console.log('删除')
      this.$modal.showConfirmAlert('提示', '确认删除吗?')
          .then(() => {

            this.$message.success('删除成功')
          })
          .catch(() => {
            this.$message.info('取消')
          })
    },

    /**
     * 日历选择 禁止不能选择的时间段
     * @param time
     * @returns {boolean}
     */
    disabledDate (time) {
      return time.getTime() > Date.now()
    },
  }
}
</script>

<style lang="scss" scoped>
// 引入公共样式文件 scss
@import '../../assets/styles/public.scss';
.app-container {
  position: relative;
  .top {
    color: $green;
  }

  .name {
    color: $blue;
  }
}

.page-nav {
  position: absolute;
  height: 88px;
  line-height: 88px;
  text-align: center;
}

.el-date-editor.el-input, .el-date-editor.el-input__wrapper {
  width: 290px;
}

// 查看docx文档时 生成的盒子
:deep(.docx-wrapper) {
  background-color: #fff;
  padding: 0;
}

:deep(.docx-wrapper > section.docx) {
  width: 100% !important;
  padding: 0rem !important;
  min-height: auto !important;
  box-shadow: none;
  margin-bottom: 0;
}

</style>
